<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{admin/component/head::head}"></div>

<body>

<div th:replace="~{admin/component/header::header}"></div>

<div class="container-fluid">
  <div class="row">

    <div th:replace="~{admin/component/nav::nav}"></div>

    <main id="app" class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">

      <div class="table-responsive mt-3">
        <table class="table table-striped">
          <thead>
          <tr>
            <th scope="col">订单号</th>
            <th scope="col">时间</th>
            <th scope="col">金额</th>
            <th scope="col">业务</th>
            <th scope="col">状态</th>
            <th scope="col">描述</th>
            <th scope="col">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="orderInfo in orderInfos" :key="orderInfo.id">
            <td>{{orderInfo.orderNo}}</td>
            <td>{{orderInfo.at}}</td>
            <td>{{orderInfo.amount}}</td>
            <td>{{ getEnumValue(orderInfo.business, ORDER_INFO_BUSINESS) }}</td>
            <td>{{ getEnumValue(orderInfo.status, ORDER_INFO_STATUS) }}</td>
            <td>{{orderInfo.desc}}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                      data-bs-target="#orderSnapshotModal" @click="queryOrderSnapshot(orderInfo)">商品信息
              </button>
            </td>
          </tr>
          </tbody>
        </table>

        <div class="modal fade" id="orderSnapshotModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">商品信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <p>
                  <b>商品</b>：{{orderSnapshot.productName}}<br>
                  <b>单价</b>：{{orderSnapshot.productPrice}} 元<br>
                  <b>数量</b>：{{orderSnapshot.productCount}}
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确认</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <page @change-page='queryOrderInfo' :pagesize='pagination.pageSize' :total='pagination.total' :page='pagination.current' />

    </main>
  </div>
</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    components: {
      page
    },
    setup() {
      const orderInfos = ref();
      const pagination = ref({
        current: 1,
        pageSize: 5,
        total: 0
      });
      const orderSnapshot = ref();
      orderSnapshot.value = {};
      const ORDER_INFO_STATUS = ref(window.ORDER_INFO_STATUS);
      const ORDER_INFO_BUSINESS = ref(window.ORDER_INFO_BUSINESS);

      const queryOrderInfo = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        axios.get("/pay/admin/order-info/query-list", {
          params: {
            page: current,
            size: pagination.value.pageSize
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            orderInfos.value = data.content.list;
            // 设置分页控件的值
            pagination.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      const queryOrderSnapshot = function (orderInfo) {
        axios.get("/pay/admin/order-snapshot/query-one/" + orderInfo.orderNo).then((response) => {
          const data = response.data;
          if (data.success) {
            orderSnapshot.value = data.content;
            console.log(orderSnapshot.value)
          } else {
            Msg.error(data.message);
          }
        });
      };

      const getEnumValue = (key, obj) => {
        return Tool.getEnumValue(key, obj);
      };

      onMounted(() => {
        queryOrderInfo();
      });

      return {
        orderInfos,
        pagination,
        queryOrderInfo,
        queryOrderSnapshot,
        orderSnapshot,
        getEnumValue,
        ORDER_INFO_STATUS,
        ORDER_INFO_BUSINESS
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
